<template>
	<view class="page">
		<view class="title-box">
			<view class="must-icon">
				*
			</view>
			<view class="title">
				项目名称
			</view>
		</view>
		<view class="input-box">
			<input class="input" @input="titleinputChange" v-if="classifyDisalogType == false" placeholder="请输入项目名称" type="text" :value="apiinfo.taskName" />
			<view class="input" v-if="classifyDisalogType">
				{{apiinfo.taskName == '' ? '请输入项目名称' : apiinfo.taskName}}
			</view>
		</view>
		<view class="title-box">
			项目内容
		</view>
		<view class="input-box">
			<textarea class="textarea" @input="textareainputChange" v-if="classifyDisalogType == false" :value="apiinfo.taskDetails" placeholder="请输入内容" />
			<view class="textarea" v-if="classifyDisalogType">
				{{apiinfo.taskDetails == '' ? '请输入内容' : apiinfo.taskDetails}}
			</view>
			<!-- <view class="cell-item" @click="uploadImage">
				<view class="left-box">
					<image class="cell-icon" src="/static/image/img_icon.png" mode="aspectFit"></image>
					<view class="title">
						图片
					</view>
				</view>
				<view class="right-box">
					<view class="value" v-if="uploadList.length > 0">
						已选择{{uploadList.length}}张
					</view>
					<image src="/static/image/more_right_icon.png" class="right-icon" mode="aspectFit"></image>
				</view>
			</view> -->
		</view>
		<view class="cell-box">
			<cell title="负责人" type="personal" borderBottom important @tap="gopersonal('leader')" :radiovalue="leader"></cell>
			<cell title="添加参与人" type="personal" borderBottom  @tap="gopersonal('participants')" :List="participants"></cell>
			<picker mode="date" :value="apiinfo.startTime" :start="startDate" @change="bindDateStartChange">
			<cell title="要求开始时间" :value="apiinfo.startTime"  borderBottom important></cell>
			</picker>
			<picker mode="date" :value="apiinfo.endTime" :start="startDate" @change="bindDateEndChange">
			<cell title="要求完成时间" :value="apiinfo.endTime"  important></cell>
			</picker>
		</view>
		<view class="cell-box">
			<cell title="项目分类" important border-bottom :value="apiinfo.label" @tap="openclassify"></cell>
			<cell title="标签" name="keyword" type="input" @input="inputchange" placeholder="请输入" important :disabled="classifyDisalogType"></cell>
		</view>
		<view class="button" @click="confirm">保存</view>
		<classify v-if="classifyDisalogType == true" :selected="classifyselected" @confirm="classifyChange" :value="apiinfo.label"
			@cancel="classifyCancel"></classify>
	</view>
</template>

<script>
	import classify from '@/pages/initiate/component/classify/classify';
	import {parseDate,uploadImage} from '@/utils/utils.js';
	import cell from '../component/cell/cell';
	import * as api from '@/utils/api.js';
	export default {
		components:{
			cell,classify
		},
		data() {
			return {
				apiinfo:{
					endTime:'',
					keyword:'',
					leaders:[],
					taskDetails:'',
					taskName:'',
					priority: "3级紧急",
					importance: "3级重要",
					redeploy: "1",
					cycle: "0",
					disassemble: "1",
					startTime:'',
					label:'',
					isSelf: "2",
					files:[],
				}, 
				leader:{},// 负责人列表
				participants:[], // 参与人列表
				uploadList:[], // 图片临时上传列表
				classifyDisalogType:false, // 分类悬浮窗显示状态
				startDate: null, // 开始时间
			}
		},
		onLoad() {
			let data = parseDate();
			// console.log(this.$refs['textarea']);
			
			this.startDate = data.year + '-' + data.month + '-' + data.day;
		},
		onUnload(){
			getApp().globalData.personList = {leader:[],participants:[],assignment:[]};
		},
		onShow(){
			let personList = getApp().globalData.personList;
				this.participants = personList.participants;
			if(personList.leader.length > 0){
				this.leader = personList.leader;
			}else{
				this.leader =personList.assignment;
			}
			console.log('show',personList);
		},
		methods: {
			titleinputChange:function(e){
				this.apiinfo.taskName = e.target.value;
			},
			textareainputChange:function(e){
				this.apiinfo.projectDetails = e.target.value;
			},
			inputchange:function(e){
				if(e.name == 'keyword'){
					this.apiinfo.keyword = e.value;
				}
			},
			openclassify:function(){
				this.classifyDisalogType = true;
			},
			classifyCancel:function(){
				this.classifyDisalogType = false;
			},
			classifyChange:function(e){
				this.apiinfo.label = e.result.name;
			},
			gopersonal:function(identity){
				let params = '?identity=';
				if(identity == 'leader'){
					params = params + identity + '&type=project&selectedType=radio';
				}else{
					params = params + identity + '&selectedType=checkbox';
				}
				uni.navigateTo({
					url: '/pages/initiate/personnel/personnel' + params
				});
			},
			bindDateStartChange:function(e){
				this.apiinfo.startTime = e.target.value;
			},
			bindDateEndChange:function(e){
				this.apiinfo.endTime = e.target.value;
			},
			/**
			 * 上传图片/附件触发事件
			 */
			uploadImage: function() {
				let that = this;
				let count = 9;
					uni.chooseImage({
						count:count, 
						sizeType: ['original', 'compressed'],
						sourceType: ['album'],
						success: function(res) {
							that.uploadList = res.tempFilePaths;
						}
					});
			},
			/**
			 * 保存按钮触发事件
			 */
			async confirm(){
				let apiinfo = JSON.parse(JSON.stringify(this.apiinfo));
				let leader = this.leader;
				let participants = this.participants;
				apiinfo.leaders = [];
				apiinfo.participant = [];
				apiinfo.leaders.push(leader.id);
				participants.forEach(res=>{
					apiinfo.participant.push(res.id);
				})
				if(apiinfo.projectName == ''){
					uni.showToast({
						title: '项目名称不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}else if(apiinfo.leaders.length == 0){
					uni.showToast({
						title: '负责人不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}else if(apiinfo.startTime == ''){
					uni.showToast({
						title: '开始时间不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}else if(apiinfo.endTime == ''){
					uni.showToast({
						title: '完成时间不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}else if(apiinfo.type == ''){
					uni.showToast({
						title: '项目分类不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}else if(apiinfo.label == ''){
					uni.showToast({
						title: '标签不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}
				let uploadList = this.uploadList;
				if(uploadList.length > 0){
					for(let res of uploadList){
						let result = await uploadImage(res);
						result = JSON.parse(result);
						apiinfo.files.push({fileName:result.data.name,fileUrl:result.data.url});
					}
				}
				console.log('confirm',apiinfo);
				api.addProject(apiinfo).then(res=>{
					uni.showToast({
						title: '保存成功',
						duration: 2000,
						complete:function(){
							getApp().globalData.personList = {leader:[],participants:[],assignment:[]};
							getApp().globalData.refreshPage = 'project';
							uni.navigateBack();
						},
						});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		width: 100%;
		min-height:100vh;
		box-sizing: border-box;
		background: #f0f3f6;
		padding: 0 20rpx;
		.title-box{
			display: flex;
			font-size: 28rpx;
			line-height:80rpx;
			.must-icon{
				color: red;
			}
		}
		.input-box{
			background-color: white;
			border-radius: 10rpx;
			border:1px solid #e2e5e8;
			.input{
				width: 100%;
				height: 80rpx;
				font-size: 28rpx;
				line-height: 80rpx;
				padding: 0 20rpx;
			}
			.textarea{
				padding:20rpx;
				height: 200rpx;
			}
			.cell-item{
				border-top: 1px solid #e2e5e8;
				width: 100%;
				position: relative;
				background-color: white;
				.left-box{
					display: flex;
					padding: 0 20rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					line-height: 80rpx;
					.must-icon{
						color: red;
					}
				.cell-icon{
					width: 40rpx;
					height: 40rpx;
					margin: 20rpx 0;
				}
				.title{
					margin-left: 10rpx;
				}
				}
				.right-box{
					position: absolute;
					display: flex;
					right:20rpx;
					top: 20rpx;
					.right-icon{
						width: 30rpx;
						height: 30rpx;
						margin-top:4rpx;
					}
					
				}
			}
		}
		.cell-box{
			margin-top: 20rpx;
			width: 100%;
			border:1px solid #e2e5e8;
		}
		.button{
			background-color: #409eff;
			color:white;
			text-align: center;
			line-height: 80rpx;
			border-radius: 10rpx;
			margin: 40rpx 0;
		}
	}
</style>
